<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
    <title>后台管理首页</title>
    <link rel="stylesheet" href="css/backstage-index.css">
    <script src="libs/echarts.min.js"></script>
    <script src="libs/jquery.min.js"></script>
</head>

<body>
    <!-- 左侧菜单开始 -->
    <nav class="side-navbar">
        <div class="sidebar-header d-flex align-items-center justify-content-center p-3 mb-3">
            <div class="sidenav-header-inner text-center"><img class="img-fluid rounded-circle avatar mb-2"
                    src="images/用户照片.png" id="userImg" alt="person">
                <h2 class="h5 text-white text-uppercase mb-0">臭居居</h2>
                <p class="text-sm mb-0 text-muted">后台管理员</p>
            </div>
            <a class="brand-small text-center" href="admin/index.html">
                <p class="h1 m-0">BD</p>
            </a>
        </div>
        <div class="d-flex my-2">
            <span class="text-uppercase text-gray-500 text-sm  fw-bold letter-spacing-0 mx-lg-2 heading"
                id="menuText">菜单
            </span>
        </div>
        <ul class="list-unstyled">
            <li class="sidebar-item active">
                <a class="sidebar-link px-4" href="">首页</a>
            </li>
            <li class="sidebar-item">
                <a class="sidebar-link px-4" href="#exampledropdownDropdown" data-bs-toggle="collapse">
                    轮播图管理
                </a>
                <ul class="collapse list-unstyled " id="exampledropdownDropdown">
                    <li><a class="sidebar-link" href="backstage_slideShow1.html">主轮播图管理</a></li>
                    <li><a class="sidebar-link" href="#">限时秒杀轮播管理</a></li>
                </ul>
            </li>
        </ul>
    </nav>
    <!-- 左侧菜单结束 -->
    <div class="page">
        <!-- 头部导航条开始 -->
        <header class="header">
            <nav class="navbar">
                <div class="container-fluid">
                    <div class="d-flex align-items-center justify-content-between w-100">
                        <div class="d-flex align-items-center">
                            <a class="navbar-brand ms-2" href="">
                                <div class="brand-text d-none d-md-inline-block text-uppercase letter-spacing-0">
                                    <strong class="text-primary text-sm">后台管理系统</strong>
                                </div>
                            </a>
                        </div>
                        <div>
                            <a class="nav-link text-white text-sm ps-0 my-auto" href="backstage_login.html">
                                <span class="d-none d-sm-inline-block">登录
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </nav>
        </header>
        <!-- 头部导航条结束 -->
        <!-- 面包屑区域 -->
        <div class="bg-gray-200 text-sm">
            <div class="container-fluid">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 py-3">
                        <li class="breadcrumb-item"><a href="backstage_index.html">菜单</a></li>
                        <li class="breadcrumb-item active" aria-current="page">首页</li>
                    </ol>
                </nav>
            </div>
        </div>
        <!-- 面包屑区域结束 -->
        <!-- 核心内容开始-->
        <div class="mainContentWrapper h-100 w-100 mt-5">
            <div class="mainContent container px-0">
                <div class="d-flex justify-content-between w-100">
                    <div class="col-6 container px-0">
                        <div class="d-flex justify-content-center">
                            <h1 class="h3 fw-normal mb-0">最近月份订单情况详情</h1>
                        </div>
                        <div class="d-flex justify-content-center">
                            <div id="pieChart1"></div>
                        </div>
                    </div>
                    <div class="col-6 container px-0">
                        <div class="d-flex justify-content-center">
                            <h1 class="h3 fw-normal mb-0">最近月份用户注册人数统计</h1>
                        </div>
                        <div class="d-flex justify-content-center">
                            <div id="barGraph1"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mainContentWrapper h-100 w-100 mt-5">
            <div class="mainContent container px-0">
                <div class="d-flex justify-content-between">
                    <div class="col-6 container px-0">
                        <div class="d-flex justify-content-center">
                            <h1 class="h3 fw-normal mb-0">三大板块售出商品详情</h1>
                        </div>
                        <div class="d-flex justify-content-center">
                            <div id="barGraph2"></div>
                        </div>
                    </div>
                    <div class="col-6 container px-0">
                        <div class="d-flex justify-content-center">
                            <h1 class="h3 fw-normal mb-0">不同时段销售额分析详情</h1>
                        </div>
                        <div class="d-flex justify-content-center container px-0">
                            <div class="sales">
                                <div class="inner" id="sale">
                                    <div class="caption">
                                        <h3>按照不同时间分类</h3>
                                        <a href="javascript:;" class="active" data-type="year">年</a>
                                        <a href="javascript:;" data-type="quarter">季</a>
                                        <a href="javascript:;" data-type="month">月</a>
                                        <a href="javascript:;" data-type="week">周</a>
                                    </div>
                                    <div class="chart" id="salePanel">
                                        <div class="label">单位:万</div>
                                        <div class="line"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row text-center gy-3">
                <div class="col-sm-6 text-sm-start">
                    <p class="mb-0 text-sm text-gray-600">环球鞋网官方后台管理系统</p>
                </div>
                <div class="col-sm-6 text-sm-end">
                    <p class="mb-0 text-sm text-gray-600">如有问题请拨打：<a
                            href="https://bootstrapious.com/p/bootstrap-4-dashboard" class="external">15576339872</a>
                    </p>
                </div>
            </div>
        </div>
        </footer>
        <!-- 核心内容结束-->
    </div>
</body>
<script src="libs/bootstrap-5/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="libs/bootstrap-5/css/bootstrap.min.css">
<script>
    chart1()
    function chart1(){
        fetch(`countingOrderNearMonth.backstage`).then(response=>response.json()).then(data=>{
            console.log(data.data)
            var pieChart1 = echarts.init(document.querySelector('#pieChart1'));
            setTimeout(function () {
                option1 = {
                    legend: {},
                    tooltip: {
                        trigger: 'axis',
                        showContent: false
                    },
                    dataset: {
                        source: [
                            ['product', '8', '9', '10', '11', '12', '1'],
                            ['待付款', 56, 82, 88, 70, 53, data.data.Jan.ostate1],
                            ['待发货', 51, 51, 55, 53, 73, data.data.Jan.ostate2],
                            ['待签收', 40, 62, 69, 36, 42, data.data.Jan.ostate3],
                            ['已完成', 25, 37, 41, 18, 33, data.data.Jan.ostate4]
                        ]
                    },
                    xAxis: { type: 'category' },
                    yAxis: { gridIndex: 0 },
                    grid: { top: '55%' },
                    series: [
                        {
                            type: 'line',
                            smooth: true,
                            seriesLayoutBy: 'row',
                            emphasis: { focus: 'series' }
                        },
                        {
                            type: 'line',
                            smooth: true,
                            seriesLayoutBy: 'row',
                            emphasis: { focus: 'series' }
                        },
                        {
                            type: 'line',
                            smooth: true,
                            seriesLayoutBy: 'row',
                            emphasis: { focus: 'series' }
                        },
                        {
                            type: 'line',
                            smooth: true,
                            seriesLayoutBy: 'row',
                            emphasis: { focus: 'series' }
                        },
                        {
                            type: 'pie',
                            id: 'pie',
                            radius: '30%',
                            center: ['50%', '25%'],
                            emphasis: {
                                focus: 'self'
                            },
                            label: {
                                formatter: '{b}: {@1} ({d}%)'
                            },
                            encode: {
                                itemName: 'product',
                                value: '1',
                                tooltip: '1'
                            }
                        }
                    ]
                };
                pieChart1.on('updateAxisPointer', function (event) {
                    const xAxisInfo = event.axesInfo[0];
                    if (xAxisInfo) {
                        const dimension = xAxisInfo.value + 1;
                        pieChart1.setOption({
                            series: {
                                id: 'pie',
                                label: {
                                    formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                                },
                                encode: {
                                    value: dimension,
                                    tooltip: dimension
                                }
                            }
                        });
                    }
                });
                pieChart1.setOption(option1);
            });
        })
    }
    chart2()
    function chart2(){
        fetch("countingRegisterNumNearMonth.backstage").then(response=>response.json()).then(data=>{
            console.log(data.data);
            var barGraph1 = echarts.init(document.querySelector('#barGraph1'));
            option2 = {
                xAxis: {
                    type: 'category',
                    data: ['8月', '9月', '10月', '11月', '12月', '1月']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [140, 240, 340, 233, 239, data.data.Jan],
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            };
            barGraph1.setOption(option2);
        }
        )
    }
    chart3()
    function chart3(){
        fetch("topSelling.backstage").then(response=>response.json()).then(data=>{
            {
                console.log(data.data);
                var barGraph2 = echarts.init(document.querySelector('#barGraph2'));
                option3 = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: '本版块售出商品数量',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                { value: data.data.cid1, name: '限时秒杀' },
                                { value: data.data.cid2, name: '捕头严选' },
                                { value: data.data.cid3, name: '优选爆款' }
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                barGraph2.setOption(option3);
            }
        })
    }

    // 销售统计模块
    {
        // (1)准备数据
        var data = {
            year: [
                [2000, 2200, 2400, 2800, 2800, 2500, 2300, 2400, 2200, 2100, 2200, 2400],
                [500, 700, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
            ],
            quarter: [
                [540, 604, 750, 460, 380, 710, 620, 730, 550, 680, 400, 580],
                [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
            ],
            month: [
                [120, 205, 170, 200, 40, 125, 300, 201, 220, 214, 240, 235],
                [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
            ],
            week: [
                [43, 53, 62, 54, 21, 54, 54, 43, 46, 43, 54, 53],
                [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
            ]
        };
        // 1. 实例化对象
        var salePanel = echarts.init(document.querySelector("#salePanel"));
        // 2. 指定配置和数据
        var option4 = {
            color: ["#00f2f1", "#ed3f35"],
            tooltip: {
                // 通过坐标轴来触发
                trigger: "axis"
            },
            legend: {
                // 距离容器10%
                right: "10%",
                // 修饰图例文字的颜色
                textStyle: {
                    color: "#4c9bfd"
                }
                // 如果series 里面设置了name，此时图例组件的data可以省略
                // data: ["邮件营销", "联盟广告"]
            },
            grid: {
                top: "20%",
                left: "3%",
                right: "4%",
                bottom: "3%",
                show: true,
                borderColor: "#012f4a",
                containLabel: true
            },

            xAxis: {
                type: "category",
                boundaryGap: false,
                data: [
                    "1月",
                    "2月",
                    "3月",
                    "4月",
                    "5月",
                    "6月",
                    "7月",
                    "8月",
                    "9月",
                    "10月",
                    "11月",
                    "12月"
                ],
                // 去除刻度
                axisTick: {
                    show: false
                },
                // 修饰刻度标签的颜色
                axisLabel: {
                    color: "#33b35a"
                },
                // 去除x坐标轴的颜色
                axisLine: {
                    show: false
                }
            },
            yAxis: {
                type: "value",
                // 去除刻度
                axisTick: {
                    show: false
                },
                // 修饰刻度标签的颜色
                axisLabel: {
                    color: "#33b35a"
                },
                // 修改y轴分割线的颜色
                splitLine: {
                    lineStyle: {
                        color: "#012f4a"
                    }
                }
            },
            series: [
                {
                    name: "预期销售额",
                    type: "line",
                    stack: "总量",
                    // 是否让线条圆滑显示
                    smooth: true,
                    data: data.year[0]
                },
                {
                    name: "实际多出销售额",
                    type: "line",
                    stack: "总量",
                    smooth: true,
                    data: data.year[1]
                }
            ]
        };
        // 3. 把配置和数据给实例对象
        salePanel.setOption(option4);
        // 4. tab切换效果制作
        // (2) 点击切换效果
        $(".sales .caption").on("click", "a", function () {
            // 此时要注意这个索引号的问题
            index = $(this).index() - 1;
            // 点击当前a 高亮显示 调用active
            $(this)
                .addClass("active")
                .siblings("a")
                .removeClass("active");
            var arr = data[this.dataset.type];
            option4.series[0].data = arr[0];
            option4.series[1].data = arr[1];
            salePanel.setOption(option4);
        });
        // 5. tab栏自动切换效果
        //  开启定时器每隔3s，自动让a触发点击事件即可
        var as = $(".sales .caption a");
        var index = 0;
        var timer = setInterval(function () {
            index++;
            if (index >= 4) index = 0;
            as.eq(index).click();
        }, 1000);
        // 鼠标经过sales，关闭定时器，离开开启定时器
        $(".sales").hover(
            function () {
                clearInterval(timer);
            },
            function () {
                clearInterval(timer);
                timer = setInterval(function () {
                    index++;
                    if (index >= 4) index = 0;
                    as.eq(index).click();
                }, 1000);
            }
        );
    }
    // 当我们浏览器缩放的时候，图表也等比例缩放
    // window.addEventListener("resize", function () {
    //     // 让我们的图表调用 resize这个方法
    //     pieChart1.resize();
    //     barGraph1.resize();
    //     barGraph2.resize();
    //     salePanel.resize();
    // })
</script>

</html>